<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right" class="nav">
      <el-breadcrumb-item to="/welcome"
        ><strong>首页</strong></el-breadcrumb-item
      >
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类 </el-breadcrumb-item> </el-breadcrumb
    ><el-card class="box-card">
      <div class="btn">
        <el-button type="primary" @click="opensort">添加分类</el-button>
      </div>

      <tree-table
        :data="list"
        :columns="columns"
        :selection-type="false"
        :expand-type="false"
        border
        :show-row-hover="false"
        class="treeTable"
        :tree-type="true"
        show-index
        index-text="#"
      >
        <!--是否有效-->
        <template slot="isok" slot-scope="scope">
          <i
            style="color: lightgreen"
            v-if="scope.row.cat_deleted === false"
            class="el-icon-success"
          ></i>
          <i style="color: red" v-else class="el-icon-error"></i>
        </template>

        <!--排序-->
        <template slot="sort" slot-scope="{ row }">
          <span
            :class="[
              row.cat_level == '0'
                ? 'el-tag el-tag--mini el-tag--light'
                : row.cat_level == '1'
                ? 'el-tag el-tag--success el-tag--mini el-tag--light'
                : 'el-tag el-tag--warning el-tag--mini el-tag--light',
            ]"
            v-html="
              row.cat_level == '0'
                ? '一级'
                : row.cat_level == '1'
                ? '二级'
                : '三级'
            "
          ></span>
        </template>

        <template slot="opt">
          <el-button type="primary" icon="el-icon-edit" size="mini"
            >编辑</el-button
          >
          <el-button type="danger" icon="el-icon-delete" size="mini"
            >删除</el-button
          >
        </template>
      </tree-table>
      <!--分页-->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="Number(obj.pagenum)"
        :page-sizes="listarr"
        :page-size="Number(obj.pagesize)"
        layout="total, sizes, prev, pager, next, jumper"
        :total="Number(total)"
        style="margin-top: 20px"
      >
      </el-pagination>

      <el-dialog title="  添加分类" :visible.sync="dialogFormVisible">
        <el-form :model="form" :rules="rules">
          <el-form-item label="分类名称:" prop="name" label-width="100px">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="父级分类:" prop="porp" label-width="100px">
            <!-- <el-cascader
              v-model="form.porp"
              placeholder="请选择"
              :options="duoxuanlist"
              :props="{
                expandTrigger: 'hover',
                label: 'cat_name',
                value: 'cat_id',
              }"
              @change="handleChange"
              clearable
            ></el-cascader> -->

            <el-cascader
              v-model="form.porp"
              placeholder="请选择"
              :options="duoxuanlist"
              :props="{
                checkStrictly: true,
                expandTrigger: 'hover',
                label: 'cat_name',
                value: 'cat_id',
              }"
              clearable
              @change="handleChange"
            ></el-cascader>
            {{ form.porp }}
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addsort">确 定</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>
<script>
import { GoodsortlistApi, addpropApi, GetGoodListApi1 } from '@/api/goods'
export default {
  name: '',
  data () {
    return {
      list: [],
      duoxuanlist: [],
      listarr: [1, 2, 5, 10],
      columns: [
        { label: '分类名称', prop: 'cat_name' },
        {
          label: '是否有效',
          prop: 'cat_deleted',
          type: 'template',
          template: 'isok'
        },
        {
          label: '排序',
          prop: 'cat_level',
          type: 'template',
          template: 'sort'
        },
        {
          label: '操作',
          type: 'template',
          template: 'opt'
        }
      ],
      dialogFormVisible: false,
      obj: {
        type: 3,
        pagenum: '1',
        pagesize: '5'
      },
      form: {
        name: '',
        porp: []
      },
      rules: {
        name: [{ required: true, message: '请输入分类名称', trigger: 'blur' }]
      },
      total: ''
    }
  },
  created () {
    this.getGoodsSort()
  },
  computed: {
  },
  methods: {
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.obj.pagesize = val
      this.getGoodsSort()
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.obj.pagenum = val
      this.getGoodsSort()
    },

    // 次级选择器选项变化会触发这个函数
    handleChange (value) {

    },

    // 获取次级选择器的数据
    async getgoodslist () {
      const res = await GetGoodListApi1()
      console.log(res, '56565')

      this.duoxuanlist = res.data
    },

    // 获取所有商品分类
    async getGoodsSort () {
      const res = await GoodsortlistApi(this.obj)
      this.list = res.data.result
      this.total = res.data.total
      console.log(res)
    },

    handleRadioClick (option) {
      console.log(option); // eslint-disable-line
    },

    // 打开商品对话框
    opensort () {
      this.getgoodslist()
      this.dialogFormVisible = true
    },
    // 添加分类
    async addsort () {
      console.log(2)
      if (this.form.porp.length <= 0) {
        addpropApi(this.form.name)
      } else {
        const level = this.form.porp.length
        addpropApi(this.form.name, level - 1, this.form.porp[level - 1])
      }
      this.$message.success('添加分类成功')
      this.dialogFormVisible = false
    }

  }
}
</script>
<style lang='less'  scoped>
.nav {
  font-size: 12px;
  margin-bottom: 15px;
}
.btn {
  margin-bottom: 15px;
}
</style>
